<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="queryParams.username"
            placeholder="请输入"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item v-if="false" label="身份" prop="role">
          <el-input
            v-model="queryParams.role"
            placeholder="请输入"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <div class="mb-[10px]">
        <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
          删除
        </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" />
        <el-table-column label="用户名" prop="username" />
        <el-table-column label="身份" prop="role" />
        <el-table-column label="注册时间" prop="createAt">
          <template #default="scope">
            {{ formatDate(scope.row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column label="上次登录时间" prop="createAt">
          <template #default="scope">
            {{ formatDate(scope.row.lastLoginAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button link type="primary" @click="handleConfigurePermissions(scope.row.username)">
              权限配置
            </el-button>
            <el-button link type="primary" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button link type="primary" @click="resetPassword(scope.row)">重置密码</el-button>
            <el-button link type="primary" @click="openStatistics(scope.row)">查看统计</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <editForm ref="editFormRef" @refresh="handleQuery" />
    <permission ref="permissionRef" @refresh="handleQuery" />
    <statistics ref="statisticsRef" />
  </div>
</template>

<script setup>
import statistics from "./statistics.vue";
import permission from "./permission.vue";
import editForm from "./form.vue";
import { formatDate } from "@/utils";
import { listApi, delApi } from "@/api/user/index.api";
import { useParamStore } from "@/store";
const route = useRoute();
const { setParams, getParams } = useParamStore();
const name = route.fullPath;
onMounted(() => {
  if (getParams(name)) {
    queryParams.value = getParams(name);
  }
});
const paging = ref({
  size: 10,
  page: 1,
  total: 0,
});

const handleSizeChange = (e) => {
  paging.value.size = e;
  getList();
};
const handleCurrentChange = (e) => {
  paging.value.page = e;
  getList();
};

const permissionRef = ref(null);
const handleConfigurePermissions = (e) => {
  permissionRef.value.handleOpen(e);
};

const ids = ref([]);
const loading = ref(false);
const tableData = ref([]);
const queryParams = ref({
  username: void undefined,
  role: void undefined,
});
const handleQuery = () => {
  paging.value.page = 1;
  paging.value.size = 10;
  setParams(queryParams.value, name);
  getList();
};
const handleSelectionChange = (e) => {
  ids.value = e.map((item) => item.id);
};

const editFormRef = ref(null);
const handleAddClick = () => {
  editFormRef.value.handleOpen();
};

const queryFormRef = ref(null);
const handleResetQuery = () => {
  queryFormRef.value.resetFields();
};

const resetPassword = (row) => {
  editFormRef.value.handleOpen(row);
};

const handleDelete = (e) => {
  if (!e) {
    ElMessageBox.confirm("是否确定删除选择行?", "Warning", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      delApi({ ids: ids.value }).then(() => {
        handleQuery();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      });
    });
    return;
  }
  ElMessageBox.confirm("是否确定删除该行?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    delApi({ ids: [e] }).then(() => {
      handleQuery();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    });
  });
};

const getList = () => {
  listApi({
    page: paging.value.page,
    size: paging.value.size,
    username: queryParams.value.username ? queryParams.value.username : void undefined,
    role: queryParams.value.role ? queryParams.value.role : void undefined,
  }).then((res) => {
    console.log(res);
    tableData.value = res.rows;
    paging.value.total = res.count;
  });
};

const statisticsRef = ref(null);
const openStatistics = (row) => {
  statisticsRef.value.init(row.username);
};

getList();
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
